<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡</title>
</head>
<body>
  <div id="list1">
    <p id="p1">取消</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
  </div>
  <div id="list2">
    <p id="p4">取消</p>
    <p id="p5">确定</p>
  </div>
  <script>
    function bindEvent(elem, type, fn) {
      elem.addEventListener(type, fn)
    }

    const p1 = document.getElementById('p1')
    const list1 = document.getElementById('list1')
    const body = document.body
    const p5 = document.getElementById('p5')

    bindEvent(p1, 'click', function () {
      console.log('p click')
    })

    // 这里给list1注册了点击事件，但是点击它里面的子元素p也会触发点击事件
    // 具体的执行过程是当点击 p 时查看当前元素有没有注册事件，有就触发，接着继续向上查找，看p的父元素及其父父元素（一直向上）是否有注册事件，有就触发
    bindEvent(list1, 'click', function () {
      console.log('list click')
    })

    bindEvent(body, 'click', function () {
      console.log('body click')
    })

    bindEvent(p5, 'click', function (event) {
      console.log('确定')
      event.stopPropagation() // 取消事件冒泡
    })
  </script>
</body>
</html>